<template>
  <div id="navigate" class="navigate navi_gation">
    <div id="navigation" class="navigation the-bg">
      <div class="navigatiBox">
        <ul>
          <!-- <li v-for="(item,index) in naviagation" :key="item.name" :class="{active:navi===index}" @click="navi=index"><router-link :to="{path:item.url}">{{item.name}}</router-link></li> -->
          <li v-for="(item, index) in naviagation" :key="index">
            <router-link
              v-if="item.name == 'SCI投稿'"
              :to="{ path: item.url, query: { id: '8' } }"
              >{{ item.name }}</router-link
            >
            <router-link
              v-if="item.name != 'SCI投稿'"
              :to="{ path: item.url }"
              >{{ item.name }}</router-link
            >
          </li>
        </ul>
        <div class="signUp" v-show="user">
          <div class="login">
            <router-link :to="{ name: 'login' }">登录/注册</router-link>
          </div>
          <!-- <div class="register">
                <a @click="hereigstr()">注册</a>
              </div> -->
        </div>
        <div class="userInfo" v-show="!user" @click="clearUser">
          <a>退出登录</a>
        </div>
        <!-- <div class="cover"></div> -->
      </div>
    </div>
  </div>
</template>

<script>
// import router from "@/router/index";
//juqery
import Header from "../header/header";
export default {
  inject: ["reload"],
  data() {
    return {
      userInfo: "",
      user: true,
      naviagation: [
        {
          name: "首页",
          url: "/home",
        },
        // {
        //   name: "系列期刊",
        //   url: "/journalCatalogueRetrieval",
        // },
        {
          name: "系列期刊",
          url: "/periodical",
        },
        {
          name: "学术论文",
          url: "/academic",
        },
        {
          name: "病例分享",
          url: "/caseshare",
        },
        {
          name: "会议培训",
          url: "/meeting",
        },
        {
          name: "名刊速览",
          url: "/contribute",
        },

        {
          name: "病例病案",
          url: "/disCase",
        },
        {
          name: "品牌栏目",
          url: "/column",
        },
        {
          name: "直播课堂",
          url: "/streaming",
        },
      ],
      // navi:''
    };
  },
  methods: {
    // 跳转注册页面
    hereigstr() {
      var therer = localStorage.getItem("theRequest");
      if (therer) {
        this.$uniRouter.push({
          path: "/register",
          query: {
            p: localStorage.getItem("theRequest"),
          },
        });
      } else {
        this.$uniRouter.push({
          path: "/register",
        });
      }
    },
    clearUser() {
      // sessionStorage.removeItem('userName');
      localStorage.clear();
      sessionStorage.clear();
      this.$uniRouter.push({
        path: "/home",
      });
      this.reload();
      this.user = false;
      this.userName = "";
    },
    getUrl() {
      // setInterval(this.reload(), 2500)
      // 手机号参数rid
      var url = location.search;
      var theRequest = new Object();
      if (url.indexOf("?") != -1) {
        var str = url.substr(1);
        var strs = str.split("&");
        for (var i = 0; i < strs.length; i++) {
          theRequest[strs[i].split("=")[0]] = unescape(strs[i].split("=")[1]);
        }
        if (theRequest) {
          axios
            .get("/api/LmUserApi/GetUrlLmDup?Token=" + theRequest.UserDupCheck)
            .then((res) => {
              if (res.data.data.State == true) {
                this.userInfo = res.data.data.author.Emailaccounts;
                if (this.userInfo) {
                  this.user = false;
                }
              } else {
                // window.location.href = 'http://yyqklm.bosihw.cn/'
                return false;
              }
            })
            .catch((err) => {
              console.log(err);
            });
        } else {
          return false;
        }
      }
    },
  },
  created() {
    // this.getUrl();
    this.userInfo = sessionStorage.getItem("userName");
    if (this.userInfo) {
      this.user = false;
    }
  },
  component: {
    Header,
  },
};
</script>

<style lang="less" scoped>
#navigation {
  width: 100%;
  height: 48px;
  background: #003c80;
  .navigatiBox {
    width: 1142px;
    height: 100%;
    margin: 0 auto;
    position: relative;
    .active {
      border-bottom: 2px solid #9dc816;
      a {
        color: #fff;
      }
    }
    ul {
      width: 94%;
      height: 100%;
      overflow: hidden;
      overflow-x: auto;
      display: flex;
      // justify-content: space-between;
      
      li {
        list-style: none;
        float: left;
        height: 49px;
        line-height: 49px;
        text-align: center;
        margin-right: 21px;
        // margin-right: 39px;
        cursor: pointer;
        a {
          padding: 0 6px;
          display: inline-block;
          width: 100%;
          height: 100%;
          color: #fff;
          font-size: 18px;
        }
      }
      li:hover {
        // background: #fff;
        border-bottom: 3px solid #9dc816;
        a {
          color: #fff;
        }
      }
    }
    .userInfo {
      height: 28px;
      border: 1px solid #fff;
      text-align: center;
      border-radius: 4px;
      position: absolute;
      color: #fff;
      top: 9px;
      right: -30px;
      padding: 2px 10px 10px 10px;
      a {
        font-size: 16px;
        color: #fff;
      }
    }
    .userInfo:hover {
      background: rgba(242, 242, 242, 0.4);
    }
    .signUp {
      width: 170px;
      height: 28px;
      position: absolute;
      right: -130px;
      top: 10px;
      div {
        width: 67px;
        height: 28px;
        line-height: 28px;
        text-align: center;
        border-radius: 20px;
        border: 1px #fff solid;
        cursor: pointer;
        a {
          color: #fff;
          font-size: 13px;
        }
      }
      .login {
        float: left;
      }
      .register {
        float: right;
        background: rgba(242, 242, 242, 0.4);
        position: relative;
      }
    }
  }
}
.router-link-active {
  color: #fff !important;
  // background: #fff;
  border-bottom: 3px solid #9dc816;
}
@media (max-width: 1500px) and (min-width: 1024px) {
  .navigatiBox {
    width: 100% !important;
  }
}
@media screen and(max-width:1010px) {
  #navigate {
    display: none;
  }
}
</style>
